<template>
  <div class="cloth-export" >
    <table 
      id="downTable"
      cellspacing="0"
      cellpadding="0"
      border="1"
      class="down-table" 
      v-if="show"
    >
      <thead>
        <tr>
          <td  :colspan="th_colspan+4">
            <div class="cell">{{title}}</div>
          </td>
        </tr>

        <tr>
          <td  rowspan="4"><div class="cell">申领日期</div></td>
          <td :colspan="th_colspan"><div class="cell">织物类型</div></td>
          <td rowspan="3" colspan="3"><div class="cell">合计</div></td>
        </tr>
        
        <tr>
          <td
            v-for="(item,index) in col"
            :key="index"
            :colspan="item.sizes.length*3"
          >
            <div class="cell">{{item.wname}}</div>
          </td>
        </tr>

        <tr>
          <template
            v-for="(item,index) in col"
            :keys="index"
          >
            <td
              v-for="(sizei) in item.sizes"
              :key="item.wname+sizei.wsize"
              colspan="3"
            >
              <div class="cell">{{sizei.wsize}}</div>
            </td>
          </template>
        </tr>

        <tr>
          <template
            v-for="(item,index) in col"
            :keys="index"
          >
            <template 
              v-for="(sizei) in item.sizes"
              :keys="item.wname+sizei.wsize">
                <td :key="item.wname+sizei.wsize+'qty'" >
                  <div class="cell">下单</div>
                </td>
                <td :key="item.wname+sizei.wsize+'check'" >
                  <div class="cell">确认</div>
                </td>
                <td :key="item.wname+sizei.wsize+'send'" >
                  <div class="cell">送达</div>
                </td>
            </template>
          </template>

          <td ><div class="cell">下单</div></td>
          <td ><div class="cell">确认</div></td>
          <td ><div class="cell">送达</div></td>
        </tr>
      </thead>

      <tbody>
        <tr
          v-for="(item,index) in lis"
          :key="index"
        >
          <td ><div class="cell">{{item.order_time_txt}}</div></td>

          <template
            v-for="(witem,windex) in col"
            :keys="windex"
          >
            <template
              v-for="(sizei) in witem.sizes"
              :keys="witem.wname+sizei.wsize"
            >
                <td :key="witem.wname+sizei.wsize+'-qty'" >
                  <div class="cell">
                    <span 
                        v-if="item[witem.wname+sizei.wsize] && item[witem.wname+sizei.wsize].qty">
                        {{item[witem.wname+sizei.wsize].qty &&  item[witem.wname+sizei.wsize].qty != 0 ? item[witem.wname+sizei.wsize].qty :''}}
                    </span>
                  </div>
                </td> 

                <td :key="witem.wname+sizei.wsize+'-check'" >
                  <div class="cell">
                    <span 
                      v-if="item[witem.wname+sizei.wsize] && item[witem.wname+sizei.wsize].check">
                      {{item[witem.wname+sizei.wsize].check  &&  item[witem.wname+sizei.wsize].check != 0 ?  item[witem.wname+sizei.wsize].check : ''}}
                    </span>
                  </div>
                </td> 

                <td  :key="witem.wname+sizei.wsize+'-send'" >
                  <div class="cell">
                      <span 
                         v-if="item[witem.wname+sizei.wsize] && item[witem.wname+sizei.wsize].send">
                        {{item[witem.wname+sizei.wsize].send && item[witem.wname+sizei.wsize].send != 0  ? item[witem.wname+sizei.wsize].send : '' }}
                      </span>
                  </div>
                </td> 
            </template>
          </template>

          <td ><div class="cell">
            <span v-if="item.order_total != 0 " > {{item.order_total}} </span>
          </div></td>

          <td ><div class="cell">
            <span v-if="item.order_check_total != 0" > {{item.order_check_total}} </span> 
          </div></td>
          
          <td  ><div class="cell">
            <span  v-if="item.order_send_total != 0" > {{item.order_send_total}} </span>
          </div></td>
        </tr>
      </tbody>


      <tfoot>
        <tr>
          <td><div class="cell">合计</div></td>
          
          <template
            v-for="(witem,windex) in col"
            :keys="windex"
          >
            <template
              v-for="(sizei) in witem.sizes"
              :keys="witem.wname+sizei.wsize">
              <template v-for="(totali,totalind) in total" :keys="totalind">
                <td :key="witem.wname+sizei.wsize+totalind"><div class="cell">
                    <span>
                        {{totali[witem.wname+sizei.wsize] && totali[witem.wname+sizei.wsize] != 0 ? totali[witem.wname+sizei.wsize] : ''}}
                    </span>
                </div></td>
              </template>
            </template>
          </template>
          

          <template v-for="(item,index) in total" :keys="index">
            <td :key="index"><div class="cell">{{item.total}}</div></td>
          </template>
          
        </tr>
      </tfoot>
    </table>
  </div>
</template>

<script>
import { downExcel } from "../../../common/downTable"
export default {
  props:{
    title: String,
    col: Array,
    lis:[],
    total:[]
  },
  data(){
    return {
      th_colspan: 0,
      show: false
    }
  },
  mounted() {
    this.hanbleInit()
  },
  methods:{
    hanbleInit(){
      this.col.forEach(ele => {
        this.th_colspan += ele.sizes.length * 3
      });
      this.show = true
      setTimeout(()=>{
        downExcel('downTable',this.title)
        setTimeout(()=>{
          this.$emit('onclose')
        },600)
      },600)
                
    },
  }
}
</script>

<style lang="less">
  .cloth-export {
    position: fixed;
    z-index: -1;
    visibility: hidden;
  }
</style>